import React from "react";
import { Box, Text } from "@chakra-ui/react";

interface SettingBoxProps {
  children: React.ReactNode;
  title: string;
  description: string;
}

const SettingBox: React.FC<SettingBoxProps> = ({
  children,
  title,
  description,
}) => (
  <Box bg="#2b2d31" p="24px" borderRadius="12px">
    <Text
      color="white"
      fontFamily="Microsoft YaHei"
      fontSize="14px"
      fontWeight={700}
      lineHeight="normal"
      mb="4px"
    >
      {title}
    </Text>
    <Text
      color="white"
      fontFamily="Microsoft YaHei"
      fontSize="13px"
      fontWeight={400}
      lineHeight="normal"
      mb="32px"
      opacity="0.7"
    >
      {description}
    </Text>
    {children}
  </Box>
);

export default SettingBox;
